<template>
  <div class="check_box_selector">
    <slot :color="color" :click="click"></slot>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import SafeCall from "../utils/SafeCall.js";

export default {
  name: "CheckBoxSelector",
  props: {
    checkedClick: Array,
    onChecked: Array
  },
  setup(props) {
    const data = reactive({
      color: ['#eac606', ''],
      checked: 0
    })

    const click = (index) => {
      if (index === data.checked) {
        SafeCall(props.checkedClick[index])
        return
      }
      SafeCall(props.onChecked[index])
      data.checked = index
      data.color.forEach((value, index, array) => array[index] = '')
      data.color[index] = '#eac606'
    }

    return { ...toRefs(data), click }
  }
}
</script>

<style scoped lang="less">
.check_box_selector {
  display: flex;
  gap: 20px;
}
</style>